import React from 'react';
import { IMicProps,  } from './type';
import IconBlock from 'src/components/IconBlock';

import micOnIcon from 'src/assets/images/micOnIcon.png';
import micOffIcon from 'src/assets/images/micOffIcon.png';
import './index.css';

const MicroPhone: React.FC<IMicProps> = ({ changeHooks, isMicOn }) => {
  return (
    // <IconBlock onClick={() => changeHooks && changeHooks()} size={20}>
    //   <img src={isMicOn ? micOnIcon : micOffIcon} />
    // </IconBlock>
    <>
      <div className="index_status__4Z9pd">
        <img className="index_userStopTalkingWave__kvQBb" src="//mediaservice-fe.volccdn.com/obj/vcloud-fe/aigc/static/media/Wave.01e86c28b481a0ab756e.gif" />
        <div className="index_status-row__uqW9E">
        <div className="dis-flex">
          <IconBlock onClick={() => changeHooks && changeHooks()} size={20}>
            <img className='icon_phone' src={isMicOn ? micOnIcon : micOffIcon} />
          </IconBlock>
          <div className="index_status-text__oj8TZ">
            {isMicOn ? '麦克风已开启, 您可以直接开始对话' : '麦克风已关闭, 请点击图标开启语音, 来体验 AI 语音能力'}
          </div>
        </div>
        {/* <img src="//mediaservice-fe.volccdn.com/obj/vcloud-fe/aigc/static/media/MicEnabled.3350b9e8e9d9d4bb9503556e842060d6.svg" className="index_status-icon__twCY5" /> */}
      </div>
      <div className="index_desc__-9vbm">AI生成内容由大模型生成，不能完全保障真实</div></div>
    </>
  );
};

export default MicroPhone;